<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类，伪元素</title>
    <style>

     /*   伪类*/
        a:link {color:#FF0000;} /* 未访问的链接 */
        a:visited {color:#00FF00;} /* 已访问的链接 */
        a:hover {color:#FF00FF;} /* 鼠标划过链接 */
        a:active {color:#0000FF;} /* 已选中的链接 */

        a.red:visited {color:#FF0000;}
       /* 匹配第一个 <p> 元素*/
        p:first-child
        {
            color:blue;
        }
       /* 选择相匹配的所有<p>元素的第一个 <i> 元素：*/
        p > i:first-child
        {
            color:blue;
        }

    /* 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
       p:first-child i
        {
            color:blue;
        }*/
        q:lang(no)
        {
            quotes: "~" "~";
        }


    /* 伪元素*/
        .p1:first-line/*注意："first-line" 伪元素只能用于块级元素。*/
        {
            color:#ff0000;
            font-variant:small-caps;
        }
         .p1:first-letter
         {
             color:#ff0000;
             font-size:xx-large;
         }

     h1:before {
         content:url(1.png);
     }
     h1:after {
         content:url(1.png);
     }

    </style>
</head>
<body>
伪类
<a class="red" href="css-syntax.html">CSS 语法</a>
<p>This is some text.</p>
<p>This is some text.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>


伪元素
<p class="p1">你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。</p>
<h1>This is a heading</h1>



</body>
</html>